<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #fff;
    }

    .placeholder_div {
        background-color: #fbf9f9;
    }

    .top_info {
        width: 100%;
        height: 11.75rem;
        background-image: linear-gradient(#FF897B, #FD614F);
        position: relative;
        color: #fff;
    }

    .top_info .tixian {
        position: absolute;
        right: 0;
        top: 0;
        width: 3rem;
        height: 1rem;
        border-radius: 0.5rem 0 0 0.5rem;
        background-color: #fff;
        text-align: center;
        line-height: 1.1rem;
        color: #FD614F;
        font-size: 0.7rem;
    }

    .top_info .add_income {
        margin: 0 0 0 1rem;
        font-size: 0.7rem;
    }

    .top_info .add_income .num {
        font-size: 2rem;
    }

    .top_info .now_yue {
        margin: 1.5rem 0 0 1rem;
        font-size: 0.7rem;
    }

    .top_info .now_yue .num {
        font-size: 0.9rem;
    }

    .top_info .other {
        width: 100%;
        height: 3rem;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .top_info .other .other_item {
        display: inline-block;
        width: 20%;
        height: 100%;
        text-align: center;
        font-size: 0.6rem;
        margin-left: -0.25rem;
        line-height: 1.2rem;
    }

    .top_info .other .other_item:first-child {
        margin-left: 0;
    }

    .detail {
        /* padding: 0 1rem; */
        width: 100%;
    }

    .detail .detail_time {
        height: 2rem;
        background-color: #fbf9f9;
        line-height: 1.8rem;
    }

    .detail .detail_time img {
        width: 0.5rem;
        height: 0.3rem;
    }

    .detail .detail_time span {
        color: #555555;
        font-size: 0.7rem;
        margin-left: 1rem;
    }

    .detail .detail_money {
        padding: 0 0.7rem;
    }

    .detail .detail_money .detail_money_item {
        height: 2.5rem;
        border-bottom: 1px solid #e9e9e9;
        position: relative;
    }

    .detail .detail_money .detail_money_item p {
        position: absolute;
    }

    .detail .detail_money .detail_money_item .money_title {
        left: 0;
        top: 0.4rem;
        font-size: 0.6rem;
        color: #555;
    }

    .detail .detail_money .detail_money_item .money_detailTime {
        left: 0;
        bottom: 0.5rem;
        font-size: 0.5rem;
        color: #838383;
    }

    .detail .detail_money .detail_money_item .money_num {
        right: 0;
        top: 0.5rem;
        font-size: 0.7rem;
        color: #555;
    }

    .detail .detail_money .detail_money_item .money_statu {
        right: 0;
        bottom: 0.4rem;
        font-size: 0.6rem;
        color: #838383;
    }

    .last_text {
        color: #FD614F;
        font-size: 0.6rem;
        text-align: center;
        line-height: 3rem;
    }

    .none {
        margin: 0.5rem 0;
        text-align: center;
        font-size: 0.6rem;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <div class="top_info">
            <div class="add_income">
                <p>累计收入(元)</p>
                <p class="num" v-if="yue_info.totalMoney">{{yue_info.totalMoney}}</p>
                <p class="num" v-else>0.00</p>
            </div>
            <div class="tixian openwin" onclick="tixian()">提现</div>

            <div class="now_yue">
                <p>当前余额(元)</p>
                <p class="num" v-if="yue_info.currentMoney">{{yue_info.currentMoney}}</p>
                <p class="num" v-else>0.00</p>
            </div>

            <div class="other">
                <div class="other_item">
                    <p>咨询收费</p>
                    <p v-if="yue_info.consultingFee">{{yue_info.consultingFee}}</p>
                    <p v-else>0.00</p>
                </div>
                <div class="other_item">
                    <p>患者赞赏</p>
                    <p v-if="yue_info.rewardFee">{{yue_info.rewardFee}}</p>
                    <p v-else>0.00</p>
                </div>
                <div class="other_item">
                    <p>平台奖励</p>
                    <p v-if="yue_info.platformReward">{{yue_info.platformReward}}</p>
                    <p v-else>0.00</p>
                </div>
                <div class="other_item">
                    <p>诊金</p>
                    <p v-if="yue_info.billingMoney">{{yue_info.billingMoney}}</p>
                    <p v-else>0.00</p>
                </div>
                <div class="other_item">
                    <p>佣金</p>
                    <p v-if="yue_info.commission">{{yue_info.commission}}</p>
                    <p v-else>0.00</p>
                </div>
            </div>
        </div>

        <div class="detail">
            <div class="detail_time" onclick="select_month()">
                <span>{{select_year}}年{{select_month}}月</span>
                <img src="../image/icon_black_arrow.png" alt="">
            </div>
            <div class="detail_money">
                <div class="detail_money_item" v-for="item in account_data">
                    <p class="money_title" v-if="item.type == 1">咨询收费</p>
                    <p class="money_title" v-if="item.type == 2">患者赞赏</p>
                    <p class="money_title" v-if="item.type == 3">平台奖励</p>
                    <p class="money_title" v-if="item.type == 4">诊金</p>
                    <p class="money_title" v-if="item.type == 5">佣金</p>
                    <p class="money_detailTime">{{item.createTimeText}}</p>
                    <p class="money_num">{{item.money}}</p>
                    <p class="money_statu">{{item.memo}}</p>
                </div>
            </div>
        </div>


        <div class="last_text">已经没有更多了~</div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        app.select_year = new Date().getFullYear();

        app.select_month = new Date().getMonth() + 1;
        get_detail()
        get_yue()
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            yue_info: "",
            page: 1, // 分页
            select_year: "", // 选择的年份
            select_month: "", // 选择的月份
            account_data: [], // 账单数据
        },
        methods: {

        },

    })
    function tixian(){
      // 去到方案详情页
      api.openWin({
          name: "tixian_win",
          url: "tixian_win.html",
          pageParam: {
              txAmount: app.yue_info.currentMoney
          }
      })
    }
    function get_detail() {
        get_ajax("doctor/account/view", {
            userId: $api.getStorage("emp").userId
        }, function (res, err) {
            if (res.code == 200) {
                app.yue_info = res.data
            } else {
                toast("网络不通畅，请稍后再试！")
            }
        })
    }

    function get_yue() {
        get_ajax("doctor/flow/listpage", {
            userId: $api.getStorage("emp").userId,
            page: app.page,
            pagesize: 20,
            year: app.select_year,
            month: app.select_month,
        }, function (res, err) {
            if (res.code == 200) {
                // alert(JSON.stringify(res))
                app.account_data = res.data.data
            } else {
                toast("网络不通畅，请稍后再试！")
            }
        })
    }

    function select_month() {
        var UIActionSelector = api.require('UIActionSelector');
        UIActionSelector.open({
            datas: 'widget://res/month.json',
            layout: {
                row: 5,
                col: 2,
                height: 30,
                size: 12,
                sizeActive: 14,
                rowSpacing: 5,
                colSpacing: 10,
                maskBg: 'rgba(0,0,0,0.2)',
                bg: '#FFFFFF',
                color: '#9B9B9D',
                colorActive: '#f00',
                colorSelected: '#000'
            },
            animation: true,
            cancel: {
                text: '取消',
                size: 12,
                w: 90,
                h: 35,
                bg: '#fff',
                bgActive: '#ccc',
                color: '#888',
                colorActive: '#fff'
            },
            ok: {
                text: '确定',
                size: 12,
                w: 90,
                h: 35,
                bg: '#fff',
                bgActive: '#ccc',
                color: '#888',
                colorActive: '#fff'
            },
            title: {
                text: '请选择',
                size: 12,
                h: 44,
                bg: '#eee',
                color: '#888'
            },
            fixedOn: api.frameName
        }, function (ret, err) {
            if (ret.eventType == "ok") {
                app.select_year = ret.level1
                app.select_month = ret.level2
                get_yue()
            } else if (ret.eventType == "cancel") {
                app.select_year = app.select_year
                app.select_month = app.select_month
            }
        });
    }
</script>
